{extend name="base" /}
{block name="css"}
 <!--这里写本页面需要的css样式-->
    <link rel="stylesheet" href="{__STATIC__}/libs/css/sb-admin-2.min.css?v={:rand_number()}"/>
   <style>
    body {
         background-image: url("/static/libs/images/user.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 100vh;
        background-position: center 0;background-color: {$cssColor};
  }
 /*红心闪闪*/
.heart {
    width: 25px;
    height: 25px;
    margin: 0 auto 20px auto;
    background-color: {$cssColor};
    position: relative;
    box-shadow: 0 0 20px 0 {$cssColor};
    animation: beat .7s linear infinite alternate;
}

.heart::before, .heart::after {
    position: absolute;
    content: " ";
    width: 25px;
    height: 25px;
    left: 0;
    border-radius: 50%;
    background-color: inherit;
    box-shadow: 0 0 20px 0 {$cssColor};
}
.heart::before{
    top: -50%;
}
.heart::after {
    left:50%;
}
@keyframes beat {
            0%{transform: rotate(-45deg) scale(0.5);}
            20%{transform: rotate(-45deg) scale(0.8);}
            40%{transform: rotate(-45deg) scale(1.1);}
            60%{transform: rotate(-45deg) scale(1.4);}
            80%{transform: rotate(-45deg) scale(1.7);}
            100%{transform: rotate(-45deg) scale(2.0);}
}
</style>
{/block}
{block name="body"}
    <div class="container" style="margin-top:120px;">
        <!-- Outer Row -->
        <div class="row justify-content-center">
            <div class="col-xl-10 col-lg-12 col-md-9">
                <div class="card o-hidden border-0 shadow-lg my-5">
                    <div class="card-body p-0">
                        <!-- Nested Row within Card Body -->
                        <div class="row">
                            <div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
                            <div class="col-lg-6">
                                <div class="p-5">
                                    <div class="text-center">
                       <img src="{:seo('image')}" width="80%" height="60">
                          <!-- 绘制心♥ -->
                           <div class="heart"></div>
                              <!-- 绘制心♥ -->
                                    </div>
                                    <form id="login_form" class="layui-form" action="{:url('lnadmin/login')}" method="post">
                                        <div class="form-group">
                                            <input class="form-control form-control-user" value="" name="username" id="username" placeholder="请输入用户名/邮箱" autocomplete="off" lay-verType="tips" lay-verify="required" required/>
                                        </div>
                                        <div class="form-group">
                                            <input class="form-control form-control-user" name="password" id="password" placeholder="请输入登录密码" value="" type="password" lay-verType="tips" lay-verify="required" required/>
                                        </div>
                                        {if seo('adminyzm')=='1'}
                                        <div class="form-group">                
                                        <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?rand='+Math.random()" class="login-captcha" />  
                                            <input class="form-control form-control-user" name="captcha" placeholder="请输入验证码" autocomplete="off" lay-verType="tips" lay-verify="required" required/>   
                                        </div>
                                        {/if}
                                        <div class="form-group">
                                            <div class="custom-control custom-checkbox small">
                                             
                                               <input type="checkbox" name="keeplogin" id="keeplogin" value="1" title="{:__('Remember')}" lay-skin="primary" checked readonly="readonly"/>          
                                            </div>
                                        </div>
                                        <font color="red"></font>
                                        <button class="btn btn-success layui-btn-normal btn-user btn-block" lay-filter="login" lay-submit id="submitBtn" disabled>登录</button>
                                       
                                    </form>
                                    <hr>
                                    <div class="text-center">
                                        <div class="login-copyright">{:seo('copyright')}<br><a href="http://beian.miit.gov.cn">{:seo('beian')}</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- js部分 -->
{/block}
{block name="js"}
<script type="text/javascript">
      layui.use(['layer', 'form', 'jquery'], function(){
        var layer = layui.layer,
            form  = layui.form,
            $     = layui.jquery;
        //表单提交
         form.on('submit(login)', function (data) {
    var index = layer.msg('<i>{:__('Login, please wait')}</i>', {
        icon: 16,
        time: false,
        shade: 0.3,
        anim: 1
    });

    $.ajax({
        url: data.form.action,
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 0) {
                setTimeout(function () {
                        location.href = result.url;
                    //parent.location.reload();
                }, 1000);
           
            layer.close(index);
            layer.msg(result.msg, {icon: 1});
            }else{
                
            layer.close(index);
            layer.msg(result.msg, {icon: 2});
            }
        },
    });
    return false;
});
});
    //判断输入完整才可点击
    const username = document.getElementById('username');
    const password = document.getElementById('password');
    const submitBtn = document.getElementById('submitBtn');
    
    username.addEventListener('input', checkInputs);
    password.addEventListener('input', checkInputs);

    function checkInputs() {
      if (username.value && password.value) {
        submitBtn.disabled = false; 
      } else {
        submitBtn.disabled = true;
      }
    }
</script>
{/block}